/**
 * Created by Phantom on 25/07/14.
 */
#header{
    background: #292929;
    text-align: center;
    border-bottom: #FFD700  2px solid;
}
/**
* Gestion du headerTop
*/
#headerTop{
    margin: 0px;
    padding: 7px 0px;
    width: 100%;
    height: 100px;

}
/**
*Gestion du menu déroulant
*/
#menu{
    margin: 0px;
    padding: 0px;
}
#menu a {
    width: 100%;
    text-align: center;
    display:block;
    color: gold;
    text-decoration:none;
}
#menu > li,
#menu > li li {
    position: relative;
    display:inline-block;
    width: 110px;
    padding: 6px 15px;
    background-color: #777;
    background-image: linear-gradient(#353535, #888 50%, #777 50%,#353535);

}
#menu > li li { background: transparent none;width: 100%; padding: 5px 0px; }
#menu > li li:hover { background:#eee; }
#menu > li:first-child {
    border-right: 1px solid #777;
    border-radius: 8px 0 0 8px;
}
#menu > li + li {
    border-left: 1px solid #aaa;
    border-right: 1px solid #777;
}
#menu > li:last-child {
    border-right:0;
    border-left: 1px solid #aaa;
    border-radius: 0 8px 8px 0 ;
}
#menu > li:hover {
    background-color: #999;
    background-image: linear-gradient(#353535, #aaa 50%, #999 50%,#353535);
}
/* (presque) fin de la partie positionnement/déco */
/* dans cette déclaration, on fixe le max-height */
#menu ul {
    position: absolute;
    top: 2em; left:0;
    max-height:0em;
    margin:0; padding:0;
    background-color:#ddd;
    background-image: linear-gradient(#6a6a6a, #999999);
    overflow:hidden;
    transition: 1s max-height 0.3s;
    border-radius: 0 0 8px 8px;
    width: 100%;
}
/* ici on change la valeur de max-height au :hover */
#menu > li:hover ul {
    /* need an adaptation, lower is better, but see it large   */
    max-height:13em;
}
